<template>
	<view class="">
		<!-- 分销提现明细 -->
		<view class="fx-list">
			<view class="current-time flex">
				<picker mode="date" v-model="changeDate" @change="bindDateChange" style="width:33%;position:relative;top: 5px;">
					<input class="padding-10" :value="changeDate"  placeholder="" disabled/>								
				</picker>	
				<text class="yzb yzb-next"></text>
			</view>
			<view v-if="detail && detail.length > 0">
				<view class="fx-detail flex jcsb" v-for="(item, index) in detail" :key="index">
					<view class="flex dbox">
						<image src="https://web.suqzp.com/public/fx4.png" class="dimg"></image>
						<view class="flex-1 pad-top-20">
							<text class="fs-28 fc-33 dis-block">余额提现</text>
							<text class="fs-24 fc-99 dis-block">{{item.createTime}}</text>
						</view>
					</view>
					<view class="mar-right-30 fs-24 fc-33 lin-h-120">{{item.amount}}</view>
				</view>
			</view>
			<view v-else class="content">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import { getDate } from '@/common/date.js'
	export default {
		data() {
			return {
				detail:[],
				changeDate:'',
				source: undefined
			}
		},
		computed:{
			...mapState(["userInfo"])
		},
		onLoad(option) {
			if(option.source) {
				this.source = option.source
			}
		},
		onShow() {
			this.changeDate = getDate()
			this.getCashBackList()
		},
		methods:{
			//选择时间
			bindDateChange: function(e) {
				this.changeDate = e.target.value;
				console.log("this.changeDate",this.changeDate)
				this.getCashBackList()
			},
			getCashBackList() {
				if(!this.userInfo || !this.userInfo.id) {
					return;
				}
				uni.showLoading()
				var param = {
					userid: this.userInfo.id,
					type: 1,
					createTime: this.changeDate
				}
				if(this.source) {
					param.source = this.source
				}
				this.$apis.fundFlowInfo(param)
				.then(res => {
					console.log("res", res);
					this.detail = res.rows
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.current-time{
			line-height:88rpx;
			padding-left: 35rpx;
			height: 90rpx;
			.yzb-next{
				transform: translateX(-50%);
			}
		}
		.content {
			padding: 35rpx;
		}
		.dis-block{
			display: block;
		}
		.fx-time{			
			padding: 0 4%;	
			color: #969799;
			margin: 20rpx 0;
			image{
				width: 24rpx;
				height: 24rpx;
				display: inline-block;
				transform:rotate(-180deg);
			}
		}
		.fx-detail{
			height: 120rpx;
			background: #fff;
			.dbox{
				width:60%;
			}
			.dimg{
				padding: 24rpx 4%;
				width: 70rpx;
				height: 70rpx;
				display: inline-block;
			}
			.lin-h-120{
				line-height: 120rpx;
			}
			.right-respan{
				text-align: right;
				.m-num{
					position: relative;
					top: 3px;
					line-height: 60rpx;
				}
				.fc-ff4{
					color: #FF4D4F;
				}
			}
		}
	}
</style>
